<script setup>
import { ref } from 'vue';

const count = ref(1)
const chooseType= [
    {
        id: 1,
        title: '选择基本信息',
        message: '创建渠道活动'
    },
    {
        id: 2,
        title: '输入渠道信息',
        message: '输入详细的渠道信息'
    },
    {
        id: 3,
        title: '完成创建',
        message: '创建成功'
    }
]
const liMain = ref('mainLi')
const type1 = ref('type1')
const type2 = ref('type2')
const messageInputLi = ref("messageInput")
function chooseNum(id){
    // 检查 count.value 是否存在且为预期的数据类型
    if (id === count.value) {
        return 'num1'
    } else {
        return 'num2'
    }
}

function changeNum(id){
    if (id != count.value) {
        count.value = id
        return 'num1'
    }
}

</script>

<template>

    <head>
        <link rel="stylesheet" href="./main.css">
    </head>
    <div>
        <!-- 头部选择栏 -->
        <ul>
            <li>iis</li>
            <li v-for="item in chooseType" :class="liMain">
                <p :class="chooseNum(item.id)" @click="changeNum(item.id)">{{ item.id }}</p>
                <div>
                    <p :class="type1">{{ item.title }}</p>
                    <p :class="type2">{{ item.message }}</p>
                </div>
            </li>
        </ul>
      
    </div>
</template>




<style>
li {
    list-style-type: none
}

ul {
    display: flex;
    border: 1px solid #000;
    justify-content: space-between;
    padding: 0px 20px;
}

.mainLi {
    display: flex;
    border: 1px solid #000;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.num1 {
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 20px 20px;
    background-color: blue;
    line-height: 40px;
    color: white;
}

.num2 {
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 20px 20px;
    background-color: #f2f3f5;
    line-height: 40px;
    color: black;
}

.type1 {
    font-size: 20px;
}

.type2 {
    font-size: 12px;
}
</style>